/* eslint-disable react/no-access-state-in-setstate */
/**
 * 子基准  下拉列表结构
 * by hly
 * create 2022-02-24
 */
import React from 'react';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Select, Tooltip, Form } from 'antd';
import { FormItemLayout, NoLableLayout } from '../../form/formPub';
import debounce from 'lodash/debounce';
import styles from './index.less';

const { Option } = Select;

class ChildBenchMarkC extends React.PureComponent {
  // props默认值
  static defaultProps = {
    title: '子基准',
    placeholder: '请选择子基准',
    helper: '',
    onChange: () => {},
    onRef: () => {}, // 本组件的引用
    width: '100%',
    rules: [], // 默认无校验规则
    formItemLayout: FormItemLayout, // 设置表单默认布局
    NoLableLayout,
    allowClear: true, // 默认可删除
    disabled: false, // 默认不禁用
    toolTipPlace: 'top', // tooltip显示位置
    includeBench: 0, // 是否包含自定义的子基准, 0) 不包含 1) 包含
    addClassName: false,
    keyFlag: false, // 判断初始值是true-自定义还是false-其他
  };

  constructor(props) {
    super(props);

    this.state = {
      benchData: undefined, // 子基准数据
      dataSource: [],
      tooltipInfo: '', // 鼠标移动到组件，展示当前选中项全称
      isChange: false, // datasource是否改变
      tempDataSource: [], // 存储无查询条件时的数据
    };
    // 绑定lodash的防抖函数，避免频繁搜索的情况
    this.onSearch = debounce(this.onSearch, 500);
  }

  componentDidMount() {
    // 父组件对本组件的引用
    this.props.onRef && this.props.onRef(this);
    // 存储无查询条件时的数据 默认下来
    this.props.dispatch({
      type: 'BaselineInformationNewM/getBenchmarkData',
      payload: {
        includeBench: this.props.includeBench,
      },
      callback: (data) => {
        this.setState({
          tempDataSource: [...data],
        });
        if (!this.props.initialValue) {
          // 如果没有初始值 就是默认下拉
          this.setState({
            benchData: [...data],
            dataSource: [...data],
          });
        }
      },
    });
    // 有初始值 单独获取子基准数据
    if (this.props.initialValue)
      this.getBenchmarkData(this.props.keyFlag, this.props.initialValue, this.props, (e) => {
        this.setState(
          {
            dataSource: e,
          },
          () => {
            // 若有初始化值，则设置tooltip
            if (this.props.initialValue !== undefined && this.props.initialValue != null) {
              this.setTooltip(this.props.initialValue);
            }
          },
        );
      });
  }

  componentDidUpdate(preProps) {
    const initT = preProps.initialValue;
    const initN = this.props.initialValue;
    if (initT !== initN) {
      // 初始值延迟加载
      this.onChange(this.props.initialValue);
      this.props.form?.setFieldsValue({
        [preProps.dataIndex]: this.props.initialValue,
      });
    }
  }

  // 设置tooltip
  setTooltip = (e, propT = this.props) => {
    if (this.state.benchData === undefined) return;

    let tooltipInfo = '';
    if (e !== undefined && e !== null) {
      const find = this.state.benchData?.filter((item) => e == item.value);
      if (find && find.length > 0) {
        tooltipInfo += find[0].title;
      }
    }
    this.setState({
      tooltipInfo: tooltipInfo === '' ? '' : <div style={{ whiteSpace: 'pre' }}>{tooltipInfo}</div>,
    });
  };

  // 调用接口，获取子基准数据
  getBenchmarkData = (flag, query, propT = this.props, callback) => {
    // 查询之前，先清空原数据
    this.setState({
      dataSource: undefined,
      loading: true,
      tooltipInfo: '',
    });
    // 查询参数
    let params = {};
    // eslint-disable-next-line eqeqeq
    if (propT.includeBench == 0 && query) {
      // 不包含自定义基准
      params = {
        keyWord: query,
      };
      // eslint-disable-next-line eqeqeq
    } else if (propT.includeBench == 1 && query) {
      // 包含自定义基准 自定义基准和非自定义入参不同
      if (flag) {
        params = {
          benchmarkId: query,
        };
      } else {
        params = {
          keyWord: query,
        };
      }
    }

    this.props.dispatch({
      type: 'BaselineInformationNewM/getBenchmarkData',
      payload: {
        includeBench: propT.includeBench,
        ...params,
      },
      callback: (data) => {
        this.setState({
          benchData: [...data],
        });
        callback(data);
      },
    });
  };

  // 非初始化状态下更改下拉选项(供父组件调用)
  setSelect = (value) => {
    const valueF = {};
    valueF[this.props.dataIndex] = value;
    this.props.form.setFieldsValue(valueF);
    // 触发子基准切换事件
    this.onChange(value);
  };

  // 模糊搜索
  onSearch = (query) => {
    if (!query) {
      // 搜索条件为空时，清空数据源
      this.setState({
        dataSource: this.state.tempDataSource,
      });
    } else {
      if (this.timer) clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.getBenchmarkData(false, query, this.props, (e) => {
          this.setState(
            {
              dataSource: e,
              isChange: true,
              benchData: e,
            },
            () => {
              // 若有初始化值，则设置tooltip
              if (this.props.initialValue != undefined && this.props.initialValue != null) {
                this.setTooltip(this.props.initialValue);
              }
            },
          );
        });
      }, 500);
    }
  };

  // 展开下拉回调
  onDropdownVisibleChange = (open) => {
    if (open) {
      this.setState({
        dataSource: this.state.benchData === undefined ? [] : this.state.benchData,
      });
    }
  };

  // 子基准切换事件
  onChange = (e) => {
    if (!e) {
      // 触发选项切换事件
      this.props.onChange(null);
      // 更改tooltip显示内容
      this.setState({
        tooltipInfo: '',
      });
      // 当清空时  下拉为默认值
      this.setState({
        benchData: this.state.tempDataSource,
        dataSource: this.state.tempDataSource,
        isChange: false,
      });
    } else {
      const ds = this.state.dataSource.filter((item) => {
        return item.value === e;
      });
      // 首先判断现有下拉 是否包含 正在变更的值
      if (ds && ds.length === 1) {
        const temp = this.judageSelfFlag(ds[0]);
        this.setTooltip(e);
        // 对外抛出事件
        this.props.onChange({ key: e, info: ds[0], flag: temp });
      } else {
        // 如果不包含 则请求
        this.getBenchmarkData(this.props.keyFlag, e, this.props, (res) => {
          // console.log('单次请求');
          this.setState(
            {
              dataSource: res,
            },
            () => {
              const item = res?.length ? res[0] : {};
              const temp = this.judageSelfFlag(item);
              // 设置tooltip
              this.setTooltip(e);
              // 对外抛出事件
              this.props.onChange({ key: e, info: item, flag: temp });
            },
          );
        });
      }
    }
  };

  // 是否是自定义基准
  judageSelfFlag = (obj) => {
    let temp = 0; // 判断该条数据是否是自定义子基准,0-否，1-是
    if (obj?.title?.indexOf('【自定义】') !== -1) {
      // 选中数据为自定义子基准
      temp = 1;
    }
    return temp;
  };

  render() {
    const { addClassName, styleRow, title, dataIndex, initialValue, placeholder, helper, width, rules, formItemLayout, allowClear, disabled, toolTipPlace } = this.props;
    return (
      <Tooltip title={this.state.tooltipInfo} placement={toolTipPlace}>
        <Form.Item
          name={dataIndex}
          rules={rules ? rules : []}
          initialValue={initialValue}
          colon={false}
          className={addClassName ? styles.removeLabel : ''}
          labelCol={title ? formItemLayout.labelCol : NoLableLayout.labelCol}
          wrapperCol={title ? formItemLayout.wrapperCol : NoLableLayout.wrapperCol}
          label={
            title ? (
              helper ? (
                <span>
                  {title}&nbsp;
                  <Tooltip title={helper}>
                    <QuestionCircleOutlined />
                  </Tooltip>
                </span>
              ) : (
                <span>{title}</span>
              )
            ) : undefined
          }
        >
          <Select
            getPopupContainer={(triggerNode) => document.body}
            style={styleRow ? styleRow : { width }}
            placeholder={placeholder}
            onChange={this.onChange}
            allowClear={allowClear}
            filterOption={false}
            showSearch={true} // 使单选模式可搜索
            onSearch={this.onSearch} // 模糊搜索
            // onDropdownVisibleChange={this.onDropdownVisibleChange}
            disabled={disabled}
            mode={undefined}
          >
            {this.state.benchData != undefined
              ? this.state.dataSource?.length > 0
                ? this.state.dataSource?.map((item) => (
                    <Option value={item.value} key={item.value}>
                      {item.title}
                    </Option>
                  ))
                : [
                    <Option key={'blank'} value={'blank'} disabled={true}>
                      无匹配的结果
                    </Option>,
                  ]
              : [
                  <Option key={'blank'} value={'blank'} disabled={true}>
                    正在加载中...
                  </Option>,
                ]}
          </Select>
        </Form.Item>
      </Tooltip>
    );
  }
}

// props类型
ChildBenchMarkC.propsTypes = {
  form: PropTypes.object, // form对象
  title: PropTypes.string, // 显示名称
  dataIndex: PropTypes.string, // Form识别的Item ID
  initialValue: PropTypes.string, // 初始默认值
  placeholder: PropTypes.string, // 占位符
  onChange: PropTypes.func, // 输入框内容变化时的回调
  helper: PropTypes.oneOfType([
    // 提示帮助信息
    PropTypes.string,
    PropTypes.element,
  ]),
  onRef: PropTypes.func, // 本组件的引用（可用来父组件调用内部方法）
  rules: PropTypes.array, // 校验规则
  formItemLayout: PropTypes.object, // 设置表单布局
  allowClear: PropTypes.bool, // 设置是否可删除
  disabled: PropTypes.bool, // 是否禁用
  includeBench: PropTypes.number, // 是否包含自定义的子基准（复合类型的值为1，其他为0）
  keyFlag: PropTypes.bool, // 初始值类似 是自定义还是股票+指数
};

export default connect(({ BaselineInformationNewM, loading }) => ({ BaselineInformationNewM, loading }))(ChildBenchMarkC);
